<template>
  <!-- 轮播 -->
  <el-carousel  :height="bannerH+'px'"  trigger="click" arrow="always">
    <el-carousel-item class="image" v-for="item in images" :key="item.id">
       <img :src="item.url" width="100%" height="100%" alt="无图片" />
    </el-carousel-item>
  </el-carousel>

</template>

<script>
  export default {
    name: "Carousel",
    data() {
      return {
        bannerH :550,
        images: [
          { id:1, url: require("@/assets/images/a.jpg")},
          {id:2, url: require("@/assets/images/b.jpg")},
          {id:3, url: require("@/assets/images/c.jpg")},
          {id:4, url: require("@/assets/images/d.jpg")},
          {id:5, url: require("@/assets/images/e.jpg")}

        ],
      };
    },
    mounted() {
      window.addEventListener('resize', () => {
        this.setBannerH()
      }, false);
    },
    methods:{
      //设置走马灯高度
      setBannerH() {
          this.bannerH = document.body.clientWidth / 4
      },
    }
  };
</script>

<style scoped>
  .el-carousel{
    overflow-x:hidden;
    overflow-y: hidden;
  }

   .image{
    height: 550px;
	
    }

</style>